<template>
  <button
    class="fl-button"
    :class="[
      `fl-button--${type}`,
      {
        'is-disabled': disabled,
        'is-loading': loading,
        'is-round': round,
      }
    ]"
    :disabled="disabled || loading"
    @click="handleClick"
  >
    <!-- loading 图标 -->
    <span v-if="loading" class="loading-icon">
      <svg viewBox="0 0 1024 1024" class="loading">
        <path d="M512 64q14.016 0 23.008 8.992T544 96v192q0 14.016-8.992 23.008T512 320t-23.008-8.992T480 288V96q0-14.016 8.992-23.008T512 64zm0 640q14.016 0 23.008 8.992T544 736v192q0 14.016-8.992 23.008T512 960t-23.008-8.992T480 928V736q0-14.016 8.992-23.008T512 704zm448-192q0 14.016-8.992 23.008T928 544H736q-14.016 0-23.008-8.992T704 512t8.992-23.008T736 480h192q14.016 0 23.008 8.992T960 512zm-640 0q0 14.016-8.992 23.008T288 544H96q-14.016 0-23.008-8.992T64 512t8.992-23.008T96 480h192q14.016 0 23.008 8.992T320 512z" />
      </svg>
    </span>
    
    <!-- 默认插槽 -->
    <slot></slot>
  </button>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

// 定义属性
const props = defineProps({
  type: {
    type: String,
    default: 'default',
    validator: (val: string) => {
      return ['default', 'primary', 'success', 'warning', 'danger'].includes(val)
    }
  },
  disabled: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  },
  round: {
    type: Boolean,
    default: false
  }
})

// 定义事件
const emit = defineEmits(['click'])

// 点击处理
const handleClick = (event: MouseEvent) => {
  if (props.disabled || props.loading) return
  emit('click', event)
}
</script>

<style>
.fl-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  height: 32px;
  white-space: nowrap;
  cursor: pointer;
  color: #606266;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  transition: .1s;
  font-weight: 500;
  padding: 8px 15px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  background-color: #ffffff;
}

.fl-button:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

.fl-button:active {
  color: #3a8ee6;
  border-color: #3a8ee6;
  outline: none;
}

/* 禁用状态 */
.fl-button.is-disabled,
.fl-button.is-disabled:hover {
  color: #c0c4cc;
  cursor: not-allowed;
  background-image: none;
  background-color: #fff;
  border-color: #ebeef5;
}

/* 加载状态 */
.fl-button.is-loading {
  position: relative;
  pointer-events: none;
}

/* 圆角按钮 */
.fl-button.is-round {
  border-radius: 20px;
}

/* 类型样式 */
.fl-button--primary {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}

.fl-button--primary:hover {
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}

.fl-button--success {
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
}

.fl-button--success:hover {
  background: #85ce61;
  border-color: #85ce61;
  color: #fff;
}

.fl-button--warning {
  color: #fff;
  background-color: #e6a23c;
  border-color: #e6a23c;
}

.fl-button--warning:hover {
  background: #ebb563;
  border-color: #ebb563;
  color: #fff;
}

.fl-button--danger {
  color: #fff;
  background-color: #f56c6c;
  border-color: #f56c6c;
}

.fl-button--danger:hover {
  background: #f78989;
  border-color: #f78989;
  color: #fff;
}

/* Loading 图标样式 */
.loading-icon {
  margin-right: 5px;
}

.loading {
  width: 14px;
  height: 14px;
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
</style>